<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.min.js" ></script>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="txt" />
			<p> 输出文本框里面的内容： {{txt }} </p>
			<hr />
			<!--
				绑定事件的意义是获取表单里面的值
				如果需要使用双向绑定，必须使用v-model
			-->
			<select v-model="sel">
				<option value="0">深圳</option>
				<option value="1">北京</option>
				<option value="2">上海</option>
			</select>
			{{ sel }}
			<hr />
			<!--
				注册，或者安装软件的时候，一般都是一个复选框 同意xxx协议
			-->
			<input type="checkbox" v-model="danCheck"  />同意协议
			{{ danCheck }}
			
			<hr />
			
			<!--
				如果是兴趣爱好，这个复选框，可能会有多个
			-->
			<input type="checkbox" v-model="duoCheck" value="西瓜" />西瓜
			<input type="checkbox" v-model="duoCheck" value="黄瓜" />黄瓜
			<input type="checkbox" v-model="duoCheck" value="香蕉" />香蕉
			{{ duoCheck }}
			
			<hr />
			
			<input type="radio" name="sex" v-model="sex" value="男" />男
			<input type="radio" name="sex" v-model="sex" value="女" />女
			{{ sex }}
			
			<hr />
			
		</div>
		
		
	</body>
	<script type="text/javascript">
		var vm = new Vue({
			el:"#app",
			data:{
				txt:'',
				// 在实现下拉列表的时候，必须给一个默认值
				sel:'0',
				// 如果复选框，只有一个，那么这个值必须是真或者假
				danCheck:false,
				// 如果复选框，有多个，那么这个值必须是列表
				duoCheck:[],
				sex:'男'
			}
		})
	</script>
</html>
